<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<!-- 主页面，此页面嵌入了导航栏以及右下角页面内容 -->
<head th:fragment="common_head">
    <!-- start: Meta -->
    <meta charset="utf-8">
    <title id="main-title">首页</title>
    <!-- end: Meta -->

    <!-- start: Mobile Specific -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- end: Mobile Specific -->

    <!-- start: CSS -->
    <link id="bootstrap-style" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap-responsive.min.css}" rel="stylesheet">
    <link th:href="@{/css/common.css}" rel="stylesheet">
    <link id="base-style" th:href="@{/css/style.css}" rel="stylesheet">


    <!-- 首页side-bar栏图标 -->
    <link rel="stylesheet" type="text/css" th:href="@{/css/all.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/v4-shims.css}">

    <!-- 时间选择 -->
    <link th:href="@{/css/jquery-clockpicker.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/bootstrap-clockpicker.min.css}" rel="stylesheet" type="text/css">

    <!-- 表格样式 -->
    <link rel="stylesheet" th:href="@{/css/keyboard.css}">
    <link rel="stylesheet" th:href="@{/js/elementui/theme-chalk/index.css}">

    <!-- 小部件样式 -->
    <link th:href="@{/css/jquery-ui.css}" rel="stylesheet">

    <!-- 日期选择下拉框 -->
    <link rel="stylesheet" th:href="@{/css/normalize.css}">

    <!-- start: Favicon -->
    <link rel="shortcut icon" th:href="@{img/favicon.ico}">
    <link th:href="@{/css/edgeMulti.css}" rel="stylesheet" type="text/css">
    <!-- end: Favicon -->
    <style>
        .sidebar-item {
            background: #b0d1ea;
        }

        html {
        <!-- /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
        --> <!-- -ms-overflow-style: none;
        --> <!-- /*火狐下隐藏滚动条*/
        --> <!-- overflow: -moz-scrollbars-none;
        --> overflow-x: auto;
        }

        <!--
        ::-webkit-scrollbar {
        --> <!-- display: none;
        --> <!--
        }

        -->
        <!--
        修改菜单栏离开后显示白色的问题

        -->

        .breadcrumb {
            height: 100%;
            margin: -20px -20px 20px -20px;
            line-height: 34px;
            background: #F7F7F7;
            color: #888;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            border-bottom: 1px solid #e5e7ea;
            -webkit-border-radius: 0px;
            -moz-border-radius: 0px;
            border-radius: 0px;
        }

        body {
        }

        .row-fluid [class*="span"] {
            margin-left: 0px;
        }

        #title {
            font-family: "Microsoft YaHei", "Microsoft Sans Serif", "Microsoft SanSerf", 微软雅黑;
            font-size: 25px;
            font-weight: 800;
        }

        #content {
            width: 85%;
        }

        @media screen and (max-width: 955px) {
            #content {
                width: 100%;
                min-width: 952px;
                overflow-x: scroll;
            }

            .navbar {
                min-width: 952px;
            }
        }

        @media screen and (max-width: 850px) {
            .timer {
                display: none !important;
            }
        }

        .sidebar-a > i {
            width: 16px;
        }

        .hidden-tablet {
            padding-left: 5px;
        }

        .neon-wrap {
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .neon-wrap span {
            display: block;
        }

        .neon-text {
            font-family: 'Monoton', cursive;
            font-size: 100px;
            animation: neon 4s infinite;
        }

        .neon-by {
            color: #404040;
            text-shadow: -3px 0px 5px #404040, 0px 0px 2px #404040;
        }

        @keyframes neon {
            0%, 30%, 32%, 34% {
                color: #222;
                text-shadow: -3px 0px 5px #222, 0px 0px 2px #222;
            }
            31%, 33%, 35%, 100% {
                color: #404040;
                text-shadow: -3px 0px 5px #404040, 0px 0px 2px #404040;
            }
        }

        div.radio {
            margin-top: 0px !important;
        }

        #app {
            width: 100%;
        }

        #content {
            min-height: 952px;
        }

        /* 二级目录缩进 */
        ul > li > ul > .sidebar-item > a{
            margin-left: 15px;
        }
    </style>
</head>

<body style="background: #f7f7f7;">
<!-- start: Header -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="btn btn-navbar" data-toggle="collapse"
               data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>

            <a class="brand" th:href="@{/main.html}">
                <span id="title">
                    <img th:src="@{/images/logo.png}" width="25" height="25" style=" padding-right: 3px; ">
                    <span style="font-family:'titlefont2';border-left: 0.1rem solid #f7f7f7;padding-left: 10px;display: inline-block;"
                          th:text="${stationInfoList_show_name}+能源路由器建模平台"></span>
                </span>
            </a>

            <!-- start: Header Menu -->
            <div class="nav-no-collapse header-nav">
                <ul class="nav pull-right">
                    <!-- start: User Dropdown -->
                    <li class="dropdown">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                            <div class="fas fa-user-circle" style="font-size: 16px; color: transparent;text-shadow: none;
                                background: linear-gradient(0.97turn, #9ec6ea 10%, #5e89af 25%, #ffffff 50%);
                                -webkit-background-clip: text;margin-top: 0px;"></div>
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-menu-title">
                                <span>账号设置</span>
                            </li>
                            <!--<li><a href="#"><i class="halflings-icon user"></i> 用户信息</a></li>-->
                            <li><a th:href="@{/manager/loginOut1}"><i class="halflings-icon off"></i> 退出</a></li>
                        </ul>
                    </li>
                    <!-- end: User Dropdown -->
                </ul>
            </div>

            <div style="position: relative; right: 0%; float: right;" class="timer">
                <div style="height: 50px; line-height: 50px; font-size: 15px;font-family: 'titlefont2';
                color: transparent; text-shadow: none; background: linear-gradient(0.97turn, #9ec6ea 35%, #5e89af 42%, #ffffff 50%);
                -webkit-background-clip: text;"
                     id="timeNow"></div>
            </div>

        </div>
        <!-- end: Header Menu -->
    </div>
</div>
<!-- end: Header -->

<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Settings</h3>
    </div>
    <div class="modal-body">
        <p>Here settings can be configured...</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

<div class="clearfix"></div>

<div class="container-fluid-full">
    <div class="row-fluid">
        <!-- start: Main Menu -->
        <div id="sidebar-left" class="span2" th:fragment="sidebar_left" style="background:#F7F7F7">
            <div class="nav-collapse sidebar-nav">
                <ul class="nav nav-tabs nav-stacked main-menu">
                    <li class="sidebar-items">
                        <a class="dropmenu" href="#" title="基本信息管理">
                            <div class="fas fa-id-card" style="font-size: 17px;"></div>
                            <span class="hidden-tablet"> 基本信息管理</span>
                        </a>
                        <ul>
                            <li class="sidebar-item" src="/basicInfo.html">
                                <a class="sidebar-a" href="#" title="基本信息设置">
                                    <i class="fa fa-bookmark"></i>
                                    <span class="hidden-tablet"> 基本信息设置</span>
                                </a>
                            </li>
                            <li class="sidebar-item" src="/point.html">
                                <a class="sidebar-a"  href="#" title="点位管理" >
                                    <i class="fas fa-braille"></i>
                                    <span class="hidden-tablet"> 点位管理</span>
                                </a>
                            </li>
                            <li class="sidebar-item" src="/pointConfig.html">
                                <a class="sidebar-a"  href="#" title="作业配置" >
                                    <i class="fa fa-adjust"></i>
                                    <span class="hidden-tablet"> 作业配置</span>
                                </a>
                            </li>
                            <li class="sidebar-item" src="/electricity.html">
                                <a class="sidebar-a" href="#" title="电价">
                                    <i class="fas fa-funnel-dollar"></i>
                                    <span class="hidden-tablet"> 电价管理</span>
                                </a>
                            </li>
                            <li class="sidebar-item" src="/energy.html">
                                <a class="sidebar-a" href="#" title="能源属性">
                                    <i class="fas fa-table"></i>
                                    <span class="hidden-tablet"> 能源属性</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="sidebar-item" src="/devices/show.html">
                        <a class="sidebar-a" href="#" title="设备管理">
                            <i class="fas fa-charging-station"></i>
                            <span class="hidden-tablet"> 设备管理</span>
                        </a>
                    </li>
                    <li class="sidebar-items">
                        <a class="dropmenu" href="#" title="图谱管理中心">
                            <div class="fa fa-linode" style="font-size: 17px;"></div>
                            <span class="hidden-tablet"> 图谱管理中心</span>
                        </a>
                        <ul>
                            <li class="sidebar-item" src="/graph.html">
                                <a class="sidebar-a" href="#" title="图谱管理">
                                    <i class="fas fa-project-diagram"></i>
                                    <span class="hidden-tablet"> 图谱管理</span>
                                </a>
                            </li>
                            <li class="sidebar-item" src="/drag.html">
                                <a class="sidebar-a" href="#" title="图谱位置调整">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span class="hidden-tablet"> 图谱位置调整</span>
                                </a>
                            </li>
                            <li class="sidebar-item" src="/knowChartChangeHistory.html">
                                <a class="sidebar-a"  href="#" title="图谱切换历史记录" >
                                    <i class="fa fa-book"></i>
                                    <span class="hidden-tablet"> 图谱切换历史记录</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="sidebar-items">
                        <a class="dropmenu" href="#" title="策略库管理">
                            <div class="fa fa-paper-plane" style="font-size: 17px;"></div>
                            <span class="hidden-tablet"> 策略库管理</span>
                        </a>
                        <ul>
                            <li class="sidebar-item" src="/relationship.html">
                                <a class="submenu sidebar-a" href="#" title="基础策略">
                                    <i class="fas fa-cog"></i>
                                    <span class="hidden-tablet">基础策略</span>
                                </a>
                            </li>
                            <li class="sidebar-item" src="/relationshipCom.html">
                                <a class="submenu sidebar-a" href="#" title="组合策略">
                                    <div class="fas fa-cogs" style="font-size: 17px;"></div>
                                    <span class="hidden-tablet">组合策略</span>
                                </a>
                            </li>
                            <li class="sidebar-item" src="/gongkuangUpgrade.html">
                                <a class="sidebar-a" href="#" title="工况升级设置">
                                    <i class="fas fa-chart-line"></i>
                                    <span class="hidden-tablet"> 工况升级设置</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="sidebar-items">
                        <a class="dropmenu" href="#" title="模型生成中心">
                            <div class="fas fa-dice-d6" style="font-size: 17px;"></div>
                            <span class="hidden-tablet"> 模型生成中心</span>
                        </a>
                        <ul>
                            <li class="sidebar-item" src="/energyModelGenerator.html">
                                <a class="submenu sidebar-a" href="#" title="能量模型生成">
                                    <i class="fas fa-poll"></i>
                                    <span class="hidden-tablet">能量模型生成</span>
                                </a>
                            </li>
                            <li class="sidebar-item" src="/electricModelGenerator.html">
                                <a class="submenu sidebar-a" href="#" title="电量模型生成">
                                    <i class="fas fa-bolt"></i>
                                    <span class="hidden-tablet">电量模型生成</span>
                                </a>
                            </li>
                            <li class="sidebar-item" src="/energyControlCenter.html">
                                <a class="sidebar-a" href="#" title="模型对比">
                                    <i class="fas fa-clone"></i>
                                    <span class="hidden-tablet"> 模型对比</span>
                                </a>
                            </li>
                            <li class="sidebar-item" src="/strategyCenter.html">
                                <a class="sidebar-a" href="#" title="工况对比">
                                    <i class="fas fa-chart-bar"></i>
                                    <span class="hidden-tablet"> 工况对比</span>
                                </a>
                            </li>
                            <li class="sidebar-item" src="/model.html">
                                <a class="sidebar-a"  href="#" title="模型管理" >
                                    <i class="fa fa-cubes" aria-hidden="true"></i>
                                    <span class="hidden-tablet"> 模型管理</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="sidebar-items">
                        <a class="dropmenu" href="#" title="展示页面">
                            <i class="fa fa-sliders"></i>
                            <span class="hidden-tablet"> 展示页面</span>
                        </a>
                        <ul>
                            <li class="sidebar-item">
                                <a class="sidebar-a" th:href="@{/view.html}" title="图谱展示">
                                    <i class="fas fa-chart-area"></i>
                                    <span class="hidden-tablet"> 图谱展示</span>
                                </a>
                            </li>
                            <li class="sidebar-item">
                                <a class="sidebar-a" th:href="@{/view2.html}" title="图谱展示2.0">
                                    <i class="fas fa-chart-area"></i>
                                    <span class="hidden-tablet"> 图谱展示2.0</span>
                                </a>
                            </li>
                            <li class="sidebar-item" src="/energyControlCenter2.html">
                                <a class="sidebar-a" href="#" title="能量电量模型对比2.0">
                                    <i class="fas fa-clone"></i>
                                    <span class="hidden-tablet"> 模型对比2.0</span>
                                </a>
                            </li>
                            <li class="sidebar-item" src="/strategyCenter2.html">
                                <a class="sidebar-a" href="#" title="工况对比2.0">
                                    <i class="fas fa-chart-bar"></i>
                                    <span class="hidden-tablet"> 工况对比2.0</span>
                                </a>
                            </li>
                            <li class="sidebar-item" src="/energyModelGenerator2.html">
                                <a class="submenu sidebar-a" href="#" title="能量模型生成2.0">
                                    <i class="fas fa-poll"></i>
                                    <span class="hidden-tablet">能量模型生成2.0</span>
                                </a>
                            </li>
                            <li class="sidebar-item" src="/electricModelGenerator2.html">
                                <a class="submenu sidebar-a" href="#" title="电量模型生成2.0">
                                    <i class="fas fa-bolt"></i>
                                    <span class="hidden-tablet">电量模型生成2.0</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!-- end: Main Menu -->

        <noscript>
            <div class="alert alert-block span10">
                <h4 class="alert-heading">Warning!</h4>
                <p>You need to have <a href="" target="_blank">JavaScript</a> enabled to use this site.</p>
            </div>
        </noscript>

        <!-- start: Content -->
        <!-- 在下方嵌入右下角页面 -->
        <div id="content" class="span10" style="padding:0px;border-left: 1px solid #e5e7ea;">
            <!--<ul class="breadcrumb">-->
            <!--<li>-->
            <!--<i class="icon-home"></i>-->
            <!--<a th:href="@{/graphInfo/viewGraphInfo}">主页</a>-->
            <!--<i class="icon-angle-right"></i>-->
            <!--</li>-->
            <!--</ul>-->
            <input type="hidden" id="hasBreadcrumb" value="true"/>
            <iframe id="content-iframe" width="100%" scrolling="no" frameborder="0" onload="loadIFrame(this);"
                    th:src="@{/basicInfo.html}+'?breadcrumb=true'">
                浏览器暂时不支持iframe，请更换支持iframe的浏览器。
            </iframe>
        </div>
        <!-- end: Content -->

    </div><!--/#content.span10-->
</div><!--/fluid-row-->

<!-- start: JavaScript-->
<div th:fragment="common_js">
    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/js/jquery-migrate-1.0.0.min.js}"></script>
    <script th:src="@{/js/jquery-ui-1.10.0.custom.min.js}"></script>
    <script th:src="@{/js/jquery.ui.touch-punch.js}"></script>
    <script th:src="@{/js/modernizr.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
    <script th:src="@{/js/jquery.cookie.js}"></script>
    <script th:src='@{/js/fullcalendar.min.js}'></script>
    <script th:src='@{/js/jquery.dataTables.min.js}'></script>
    <script th:src="@{/js/excanvas.js}"></script>
    <script th:src="@{/js/jquery.flot.js}"></script>
    <script th:src="@{/js/jquery.flot.pie.js}"></script>
    <script th:src="@{/js/jquery.flot.stack.js}"></script>
    <script th:src="@{/js/jquery.flot.resize.min.js}"></script>
    <script th:src="@{/js/jquery.chosen.min.js}"></script>
    <script th:src="@{/js/jquery.uniform.min.js}"></script>
    <script th:src="@{/js/jquery.cleditor.min.js}"></script>
    <script th:src="@{/js/jquery.noty.js}"></script>
    <script th:src="@{/js/jquery.elfinder.min.js}"></script>
    <script th:src="@{/js/jquery.raty.min.js}"></script>
    <script th:src="@{/js/jquery.iphone.toggle.js}"></script>
    <script th:src="@{/js/jquery.uploadify-3.1.min.js}"></script>
    <script th:src="@{/js/jquery.gritter.min.js}"></script>
    <script th:src="@{/js/jquery.imagesloaded.js}"></script>
    <script th:src="@{/js/jquery.masonry.min.js}"></script>
    <script th:src="@{/js/jquery.knob.modified.js}"></script>
    <script th:src="@{/js/jquery.sparkline.min.js}"></script>
    <script th:src="@{/js/counter.js}"></script>
    <script th:src="@{/js/retina.js}"></script>
    <script th:src="@{/js/custom.js}"></script>
    <script th:src="@{/js/TweenMax.min.js}"></script>
    <script th:src="@{/js/device.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <script th:src="@{/js/mxClient.js}"></script>
    <script th:src="@{/js/time.js}"></script>
    <script th:src="@{/js/jquery.blockUI.js}"></script>

    <!-- 时间选择 -->
    <script th:src="@{/js/jquery-clockpicker.min.js}"></script>
    <script th:src="@{/js/bootstrap-clockpicker.min.js}"></script>

    <!-- 月/日 日期选择 -->
    <script th:src="@{/js/jquery.easyui.min.js}"></script>
    <script th:src="@{/js/easyui-lang-zh_CN.js}"></script>

    <!-- 页面导航栏设置js -->
    <script th:src="@{/js/breadcrumb.js}"></script>

    <script type="text/javascript">
        // iframe高度自适应
        //        function clearScrollHeight(iframeName) {
        //            var iframe = document.getElementById(iframeName);
        //            var subWeb = document.frames ? document.frames[iframeName].document : iframe.contentDocument;
        //            console.log(subWeb.body.scrollHeight);
        //            if (iframe != null && subWeb != null) {
        //                iframe.height = 0
        //            }
        //        }
    </script>

    <script type="text/javascript">
        //获取标题栏title
        $.ajax({
            type: "GET",
            url: "/multipower/title/get/name",
            dataType: "json",
            async: true,
            success: function (data) {
                if (data.error == undefined) {
                    $("#title-content").html(data.title)
                    //console.log(data.title)
                }
            }
        })

        function loadIFrame(obj) {
            // 判断是否子页面跳转到login.html
            var url = obj.contentWindow.location.href
            var part = url.substring(url.lastIndexOf("/") + 1)
            if (part.lastIndexOf('?') != -1) {
                part = part.substring(0, part.lastIndexOf("?"))
            }
            // 若iframe中的页面跳转到login.html页面，刷新父业面，跳转到父业面的login.html页面
            if (part == 'login.html') {
                window.location.reload()
            }
        }


        function modifyTitle(title) {
            // 根据子页面传递过来的值设置父页面的title
            if (title != '') {
                $("#main-title").html(title)
            }
        }

        // 父页面增加一个弹出框方法，注意，这里如果别的页面需要嵌入弹出框，父页面里面也需要有这个方法
        function layerAlert(msg, obj) {
            obj["offset"] = "auto"
            obj["title"] = !obj["title"] ? "提示" : obj["title"]
            // console.log("test... obj", obj)
            layer.alert(msg, obj)
        }
    </script>

    <script th:inline="javascript">
        $(".sidebar-item").on('click', function (e) {
            var basepath = [[${#request.getContextPath()}]]
            var src = $(this).attr("src")
            if (src != undefined) {
                // 首先将其高度设置为0
                <!--                document.getElementById("content-iframe").style.height = '0px'-->
                $("#content-iframe").attr("src", basepath + src + '?breadcrumb=true')
            }

            // 首先去掉其他class
            $(".sidebar-item").removeClass("active")

            $(this).addClass("active")

            e.stopPropagation()
        })

        $(".sidebar-item").on('mouseover', function () {
            var basepath = [[${#request.getContextPath()}]];
            // var src = this.attributes.src;
            var src = $(this).attr('src');
            if (src != undefined) {

                // 首先将其高度设置为0
                <!--                document.getElementyId("content-iframe").style.height = '0px'-->
                // $("#content-iframe").attr("src", basepath + src + '?breadcrumb=true')
                this.children[0].href = basepath + src;
            }
            // console.log(this.children[0].href);
        })


        $(".sidebar-items").on('click', function (e) {
            if (!$(this).hasClass("unfold")) {
                $(".sidebar-item").removeClass("active")
                $(".sidebar-items").removeClass("unfold")
                $(this).addClass("unfold")
            } else {
                $(".sidebar-item").removeClass("active")
                $(".sidebar-items").removeClass("unfold")
            }
        })
    </script>
</div>
</body>

<script>
    // 根据浏览器报错内容，draw()方法应该在body标签之外进行调用
    draw()
</script>
</html>
